Vue Js get value of selected option of Dropdown : In Vue.js, the v-model directive can be used to bind the selected value of a dropdown to a data property in your component. This means that whenever the user selects a different option, the value of the data property will be updated accordingly. You can then access the selected value by referencing the data property in your component’s methods or computed properties. This allows you to easily retrieve and manipulate the selected value of a dropdown in your Vue.js application.
How can I get the selected value of a dropdown in Vue js?
To get the value of the selected option of a dropdown in Vue.js, you can bind the v-model
directive to a data property and access its value. In this example, the selectedFruit
property is bound to the dropdown using the v-model
directive, so its value will automatically update when a new option is selected.
To access the value of the selected option, you can simply reference the selectedFruit
property in your Vue.js template, like this:
Vue Js get value of selected option of Dropdown Example
<div id="app">
<label for="my-dropdown">Select a fruit:</label>
<select id="my-dropdown" v-model="selectedFruit">
<option disabled value="">Please select one</option>
<option v-for="(fruit, index) in fruits" :key="index" :value="fruit.value">{{ fruit.label }}</option>
</select>
<p>The selected fruit is: {{ selectedFruit }}</p>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
selectedFruit: '',
fruits: [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Cherry', value: 'cherry' },
{ label: 'Date', value: 'date' },
{ label: 'Elderberry', value: 'elderberry' }
]
};
}
})
</script>
Output of Vue Js get value of selected option of Dropdown
![](https://danatec.vn/wp-content/uploads/2024/06/9-12.webp)